<template>
    <div>
<!--      <iframe :src="this.listAll"-->
<!--              width="100%" :height="750*1"-->
<!--              frameborder="1" scrolling="auto">-->

<!--      </iframe>-->
      <div style="position: absolute;left: 2rem;top: 1rem">
        <van-col span="24" ><img class="imgaa" src="../../assets/返回.png" @click="aaa"></van-col>
      </div>
      <div style="position: absolute;left: 19rem;top: 1rem">
        <van-col span="24" ><img class="imgaa" src="../../assets/分享.png" @click="share('weixin')"></van-col>
      </div>

<!--      <ion-content scroll="true" overflow-scroll="true">-->
<!--        <iframe style="width:100%;height:100%;" :src="this.listAll" frameborder="0" scrolling="no" id="bdIframe">-->
<!--        </iframe>-->
<!--      </ion-content>-->

<!--      <vrtiaozhuan :inputmodea="this.listAll"></vrtiaozhuan>-->
      <van-overlay :show="this.show" :custom-style="{background:'rgba(0,0,0,1)'}"/>
      <ion-content scroll="true" overflow-scroll="true">
        <iframe v-if="this.listAll!=null && this.listAll!=''" style="width:100%;height:100%;" :src="this.listAll" frameborder="0" scrolling="no" id="bdIframe">
        </iframe>
      </ion-content>
    </div>
</template>

<script>
  import { findAllSandById } from "@/api/commodity/strategy";
  import vrtiaozhuan from './vrtiaozhuan'
  import strategySand from "./strategy_sand";
  import strategyPic from "./strategy_pic";
  import strategyCase from "./strategy_case";
  import { Toast } from 'vant';
  export default {
        name: "vr",
      data(){
          return{
            show:true,
            loadingStatus:false,
            zhuti: null,
            lujing: null,
            listAll: Number,
            vrId: [],

            buttons: [{
              title: '我的好友',
              extra: {
                scene: 'WXSceneSession'
              }
            },
              {
                title: '朋友圈',
                extra: {
                  scene: 'WXSceneTimeline'
                }
              },
            ],
          }
      },
    created() {
      this.vrId = this.$route.query && this.$route.query.vrId;
      console.log("**this.vrId***"+this.vrId)
      this.loading();
      this.getList();
    },
    components: {
      vrtiaozhuan
    },
    mounted(){
      if(window.plus) {
        this.updateSerivces();
      }
      /**
       * iframe-宽高自适应显示
       */
      const oIframe = document.getElementById('bdIframe');
      const deviceWidth = document.documentElement.clientWidth;
      const deviceHeight = document.documentElement.clientHeight;
      oIframe.style.width = deviceWidth + 'px'; //数字是页面布局宽度差值
      oIframe.style.height = deviceHeight + 'px'; //数字是页面布局高度差

      //监听iframe是否加载完毕
      var _this = this
      const iframe = document.querySelector('#bdIframe')
      // 处理兼容行问题
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', function () {

        })
      } else {
        iframe.onload = function () {
          // iframe加载完毕以后执行操作
          setTimeout(function (){
            _this.show = false;
            _this.closeloading();
          },350)
        }
      }
    },
    methods:{
      closeloading(){
        this.Toast.clear(); // 关闭加载
      },
      loading(){
        /*this.$toast.loading({
          duration: 0,
          forbidClick: true,
          mask: true,
          message: "加载中..."
        });*/
        Toast.loading({
          message: '加载中...',
          forbidClick: true
        });
      },
      aaa(){
        this.$router.push({
          path:"/strategy_index",
          query:{
            type: "c"
          }});
      },
      /**
       * 获取微信分享通道
       */
      updateSerivces() {
        let _this = this;
        plus.share.getServices(function (s) {
          _this.shares = {};
          for (var i in s) {
            var t = s[i];
            _this.shares[t.id] = t;
          }
          _this.sweixin = _this.shares['weixin'];
          _this.sqq = _this.shares['qq'];
          _this.sinaweibo = _this.shares['sinaweibo'];
        }, function (e) {
          plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
        });
      },
      //第三方分享
      share(a) {
        let _this = this;

        if(a == 'weixin'){
          let msg = {
            type: 'web', //分享的内容的类型
            title: '淘小建自建房平台VR图太赞了,分享给你',
            content: this.zhuti,
            thumbs: [this.lujing],
            href: this.listAll,
            extra: {
              scene: "WXSceneSession"
            } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
          }
          plus.nativeUI.actionSheet({
            title: '分享到微信',
            cancel: '取消',
            buttons: _this.buttons,
          }, function (e) {
            (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
          })
        }
      },

      /**
       * 触发分享
       */
      sharePage(srv, msg, button) {
        let _this = this;
        // plus.nativeUI.alert('分享操作：');
        if (!srv) {
          plus.nativeUI.alert('无效的分享服务！');
          return;
        }
        button && (msg.extra = button.extra);
        // 发送分享
        if (srv.authenticated) {
          // plus.nativeUI.alert('---已授权---');
          _this.doShare(srv, msg);
        } else {
          // plus.nativeUI.alert('---未授权---');
          srv.authorize(function () {
            _this.doShare(srv, msg);
          }, function (e) {
            plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
          });
        }
      },
      /**
       * 开始分享
       */
      doShare(srv, msg) {
        let _this = this;
        srv.send(msg, function () {
          plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
        }, function (e) {
          plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
        });
      },

      getList(){
        findAllSandById(this.vrId).then(res=>{
          this.listAll = res.data.data.vrUrl
          this.lujing = res.data.data.vrShouyeUrl
          this.zhuti = res.data.data.vrZhuti
          console.log("***this.listAll***"+this.listAll)
        })
      }
    }

    }
</script>

<style scoped>
  .imgaa{
    width: 1.5rem;
    height: 1.5rem;
  }
  imgbb{
    width: 1.5rem;
    height: 1.5rem;
  }
</style>
